// 节点模板编辑器
<template>
  <div class="node_conatiner">
    <Node :data="data" :editType="editType"/>
    <BranchEdit v-if="hasBranch" :data="branchData" :editType="editType">
      <NodeEdit slot="branchChildNode" slot-scope="props" :data="props.data" :editType="editType"/>
    </BranchEdit>
    <NodeEdit v-if="hasChildNode" :data="data.childNode" :editType="editType"/>
    <Done v-if="data.type === 'O'" />
  </div>
</template>

<script>
import Done from "./components/nodes/Done.vue";
import Node from "./components/nodes/node.vue";
import BranchEdit from "./branchEdit.vue";
export default {
  props: {
    data: Object,
    editType: Number
  },
  name: "NodeEdit",
  components: {
    Done,
    BranchEdit,
    Node,
  },

  computed: {
    hasBranch() {
      return (
        (this.data.conditionNode && this.data.conditionNode.length > 0) ||
        (this.data.shuntNode && this.data.shuntNode.length > 0)
      );
    },

    branchData() {
      if (this.data.conditionNode && this.data.conditionNode.length > 0) {
        return this.data.conditionNode;
      } else if (this.data.shuntNode && this.data.shuntNode.length > 0) {
        return this.data.shuntNode;
      } else {
        return null;
      }
    },
    hasChildNode() {
      return !!this.data.childNode;
    },
  },

  methods: {},
};
</script>

<style scoped>
.node_conatiner {
  display: flex;
  flex-direction: column;
  align-items: center;
}
</style>